<template>
  <div>
   <div class="header">
     <HelloWorld :data=data></HelloWorld>
   </div>
    <van-address-list
      v-model="datas.id"
      :list='datas'
      @add="onAdd"
      @edit="onEdit"
      @click-item='is'
    />
  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'
import HelloWorld from '../components/HelloWorld.vue'
import { Toast } from 'vant';
import {mapState,mapActions} from 'vuex'
  export default {
    name: 'About',
    //import引入的组件需要注入到对象中才能使用
    components: {
      HelloWorld
    },
    data() {
      //这里存放数据
      return {
        data:'北京城区',
              chosenAddressId: '1',
     
      }
    },
    //监听属性 类似于data概念
    computed: {
      ...mapState(['datas'])
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      ...mapActions(['GET_DATA']),
        onAdd() {
      // Toast('新增地址');
      this.$router.push({name:'Aduress'})
    },
    onEdit(item, index) {
      Toast('编辑地址:' + index);
     
    },
    is(item){
        //  console.log(item)
        this.$store.commit('SET_ADD',item)
        this.$router.push({name:'Pei'})
    }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      // console.log(this.$store.state.datas);
      if(this.$store.state.datas.length>0){
        console.log(1);
      }else{
        this.GET_DATA()
      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
      .header{
       width: 100%;
       height: 60px;
       background: #f5f5f5;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 20px;
     }
</style>
